<template>
	<swiper autoplay="true" interval="2000" circular="true" >
		<swiper-item>
			<view class="lunbo1">
				<image :src="src.src1" mode=""></image>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="lunbo2">
				<image :src="src.src2" mode=""></image>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="lunbo3">
				<image :src="src.src3" mode=""></image>
			</view>
		</swiper-item>
	</swiper>
	<view class="seat">
		<view class="chose">
			<text >
				选择座位
			</text>
		</view>
		<view class="normolBox">
			<text>双人阅读区</text>
			<text>供2个人使用</text>
			<text>独立秘密的阅读环境</text>
			<button @click="order">立即预约</button>
		</view>
		<view class="small-Box">
			<text>明区-单人</text>
			<button @click="order">立即预约</button>
			<text>开放的单人学习区域</text>
			
		</view>
		<view class="small-Box">
			<text>暗区-单人</text>
			<button @click="order">立即预约</button>
			<text>幽静的单人学习区域</text>
			
		</view>
	</view>
	<view class="study-Address">
		<text>自习室地址</text>
		<view>
			<text class="icon-ditu-dibiao"></text>
			<text>福建省福州市台江区天宫路350-5号</text>
			<text class="view-map">查看地图></text>
		</view>
	</view>
	<view class="introduce">
		<text>空间介绍</text>
		<image src="" mode=""></image>
		<text>在开放的单人区学习，你可以感受周围浓烈的学习氛围，无论是上网还是看、刷题、乃至办公，效果都极佳！更有机会认识一群爱学习的好书友！</text>
	    <image src="" mode=""></image>
		<text>相对独立的双人区，是你和好友互勉学习的不二选择。在优雅的环境中，你们可以互相监督，互相讨论，当然，偶尔吃点小零食也是很惬意的。</text>
	</view>
	<view class="process">
		<text class="process-text">学习流程</text>
		<view class="process-learn">
			<text>①线上付费预约</text>
		</view>
		<view class="process-learn">
			<text>②门店扫码开门</text>
		</view>
		<view class="process-learn">
			<text>③对应位置入座</text>
		</view>
		<view class="process-learn">
			<text>④扫码开灯学习</text>
		</view>
	</view>
	<view class="precautions">
		<text class="precautions-biao">注意事项</text>
		<view>
			<text class="precautions-wen">关于声音控制</text>
			<text>在自习室内，请自觉保持安静。请控制声量，将手机调成静音状态。如有电话需求，请移步公共区域。</text>
			 <text class="precautions-wen">关于饮食</text>
			 <text>请不要在自习室吃带有浓厚气味的食品</text>
			 <text class="precautions-wen">关于座位</text>
			 <text>请勿占用无人座位，请勿随意涂鸦，离开座位前请将椅子归为，并扫码关灯。</text>
		</view>
	</view>
</template>

<script setup>
import {reactive,toRefs} from 'vue'
import { http } from '@/static/utils/http.js'


const data = reactive({
	src : {
		src1:'',
		src2: '',
		src3:''
	},
	// 跳转到预定座位的页面
	order(){
		uni.navigateTo({
			url: '/pages/bookingOptions/bookingOptions'
		});
	},
})

const getSrc = ()=> {
	http({
		url:'/getUploadData',
		method:'get'
	})
		.then((res) => {
			data.src.src1 = 'http://localhost:3010/images/' + res.data.data[0].picture_src
			data.src.src2 = 'http://localhost:3010/images/' + res.data.data[1].picture_src
			data.src.src3 = 'http://localhost:3010/images/' + res.data.data[2].picture_src
		})
		.catch(error => console.log(error))
}
getSrc()
const {src} = toRefs(data)
const {order} = toRefs(data)
</script>

<style>

template{
		display: flex;
	}
swiper{
	
	padding-left: 25rpx;
	/* border: 1rpx solid red; */
}

swiper-item image {
	width: 100%;
	height: 100%;
}
swiper view{
	height:500rpx;
	width: 700rpx;
}
.lunbo1{
	background-color: red;
	
}
.lunbo2{
	background-color: blue;
	   
}
.lunbo3{
	background-color: pink;
 
}
.seat{
	/* border: 1rpx solid red; */
	padding-left: 20rpx;
	padding-top: 20rpx;
	height: 400rpx;
}
.chose{
	margin-top: 20rpx;
	font-weight: 900;
	margin-left: 10rpx;
}
.normolBox{
	height: 300rpx;
	width: 320rpx;
	/* border: 1rpx solid red; */
	box-shadow: 0 0 20rpx #ebebeb;
	float: left;
	margin-top: 10rpx;
	
}
.normolBox text{
	display: block;
	padding-top: 20rpx;
	padding-left: 20rpx;
}
.normolBox text:nth-child(1){
	font-weight: 900;
}
.normolBox text:nth-child(2){
	color: grey;
	font-size: 20rpx;
}
 .normolBox text:nth-child(3){
	 color: grey;
	 font-size: 20rpx;
 }
 .normolBox button{
	 height: 60rpx;
	 width: 200rpx;
	 line-height: 60rpx;
	 background-image: linear-gradient(to right, #8d8ccf , #b8cff2);
	 border-radius: 40rpx 40rpx ;
	 color: white;
	 margin-left: 20rpx;
	 margin-top: 60rpx;
	 font-size: 1rem;
 }
 .small-Box{
	 margin-top: 10rpx;
	 height: 150rpx;
	 width: 360rpx;
	 float: left;
	 margin-left: 20rpx;
	 box-shadow: 0 0 20rpx #ebebeb;
 }
 
 .small-Box text:nth-child(1){
	 font-weight: 900;
	 padding-left: 20rpx;
	 margin-top: 20rpx;
	 display: inline-block;
	
 }

 .small-Box text:last-child{
 	 padding-top: 20rpx;
	 color: grey;
	 font-size: 20rpx;
	 display: inline-block;
	 padding-left: 20rpx ;
 }
  .small-Box button{
	display: inline-block;
	margin-top: 30rpx;
	height: 40rpx;
	width: 160rpx;
	line-height: 40rpx;
	margin-left: 10rpx;
    font-size: 0.5rem;
	background-image: linear-gradient(to right, #8d8ccf , #b8cff2);
    border-radius: 40rpx 40rpx ;
    color: white;
  }
 .study-Address text:first-child{
	  font-weight: 900;
	  margin-left: 20rpx;
	  
 }
 .study-Address view{
	 margin-top: 0.75rem;
	 line-height: 2rem;
	 height: 2rem;
	background-color: #f2f2f2;
	border-radius: 40rpx 40rpx;
 }
 .view-map{
	 color: #808efc;
	 float: right;
 }
  .introduce{
	  
  }
 .introduce text{
	 display: block;
	 margin-left: 20rpx;
 }
  .introduce text:first-child{
	  font-weight: 900;
	  margin-top: 20rpx ;
  }
  .process{
	  
	  margin-top: 20rpx;
	 padding-left: 20rpx;
  }
.process-text{
	font-weight: 900;
}
 .process-learn{
	 height: 2.5rem;
	 width: 700rpx ;
	 line-height: 2.5rem;
	 margin-top: 1rem;
	 text-align: center;
	box-shadow: 0 0 20rpx darkgray;
 }
 .process-learn text{
	 font-weight: 500; 
 }
 .precautions{
	 margin-left: 20rpx ;
	 margin-top: 40rpx;
	 width: 700rpx;
	 
 }
  .precautions-biao{
	  font-weight: 900;
  }
  .precautions view{
	  background-color: #f2f2f2;
	  border-radius: 2%;
  }
  .precautions text{
	  display: block;
	   padding-top: 10rpx ;
	   margin-top: 10rpx ;
	   color: #7f7f7f;	
  }
  .precautions-wen{
	  font-weight: 700;
	  margin-top: 20rpx ;

  }
</style>
